<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=GBK">
    <title></title>
    <link href="../css/css.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="../../jquery-ui-1.8/js/jquery-ui-1.8.custom.min.js"></script>
    <style type="text/css">
        
    </style>
</head>
<body>
  <input type="button" name="add" id="id_btn" value="add" onclick="addPanel();">

</body>
<script type="text/javascript">
    var left=100;
    var top=100;
    var idIndex=1;
    function addPanel() {
        left++;
        top++;
        idIndex++;
        var div= $("body").append("<div id='id"+idIndex+"'></div>");
        $("#id"+idIndex).css({position: "absolute", border: "1px solid green", left: (left+1)+"px", top: (top+1)+"px"}).width("200px").height("200px"); 
        $("#id"+idIndex).draggable().resizable();
        $("#id"+idIndex).resizable();
        $("#id"+idIndex).droppable({
			drop: function(event, ui) {
                alert(event.target.id);
//				$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
			}
		});
    }
</script>
</html>